<template>
  <div class="add">
    <el-alert title="添加商品信息" type="info" center show-icon>
    </el-alert>
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <div class="bg">
      <template>
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="基本信息">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="ruleForm.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="goods_price">
                <el-input v-model="ruleForm.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" prop="goods_weight">
                <el-input v-model="ruleForm.goods_weight"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="goods_number">
                <el-input v-model="ruleForm.goods_number"></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="attrs">
                <el-cascader v-model="value" :options="options"
                  :props="{ expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }"
                  @change="handleChange"></el-cascader>
              </el-form-item>
            </el-form>



          </el-tab-pane>
          <el-tab-pane label="商品参数">配置管理</el-tab-pane>
          <el-tab-pane label="商品属性">角色管理</el-tab-pane>
          <el-tab-pane label="商品图片">
            <el-upload class="upload-demo" :headers="headersimg" :action="jburl"
              :on-preview="handlePreview" :on-success="cgsuccess" :on-remove="handleRemove"  list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容">
            定时任务补偿
            <el-button type="primary" @click="add">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import { getgoods, getcategories } from "../utils/orders"
export default {
  data() {
    return {
      value: "",
      label: "",
      options: [],
      active: 0,
      headersimg:{Authorization : localStorage.getItem('token')},
      jburl:"http://shiyansong.cn:8888/api/private/v1/upload",
      tabPosition: 'left',
      ruleForm: {
        goods_name: "",
        goods_price: 1,
        goods_weight: 1,
        goods_number: 1,
        pics:[]

      },
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30个字符', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
        ],
        goods_number: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
        ],
        goods_weight: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
        ],
        attrs: [
          { required: true, message: '请输入选择', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    add() {
      getgoods(this.ruleForm).then(res => {
        console.log(res);
        // if(res.meta.status==200){
        //   this.$message.success("获取分类列表成功")
        // }else{
        //   this.$message.error("请填写必要商品信息")
        //   return false
        // }
        this.$router.push("/goods")
      })
    },
    handleChange() { },
    handleRemove(file, fileList) {
      console.log(111,file, fileList);
      let jbimg=file.response.data.tmp_path
      let index=this.ruleForm.pics.findIndex(item=>item.pic==jbimg)
      this.ruleForm.pics.splice(index,1)

    },
    handlePreview(file) {
      console.log(file);
    },
    //成功接受
    cgsuccess(val){
      console.log("请求成功",val);
      let tmp_path=val.data.tmp_path
      let picss={pic:tmp_path}
      this.ruleForm.pics.push(picss)
      // this.ruleForm.pics.push({pic:val.data.tmp_path})
    },

  },
  created() {
    getcategories().then(res => {
      console.log(94, res);
      this.options = res.data
    })
  },
  mounted() {

  },
  components: {

  },
  computed: {

  },
  watch: {

  },
}
</script>

<style lang='scss' scoped>
.add {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
}

.el-alert {
  margin-bottom: 30px;
}

.bg {
  width: 100%;
  margin-top: 20px;
}
</style>
